<template>
     <div class="title-bar" v-if="clinetAppComputed">
      <span class="title-content">{{ props.title }}</span>
    </div>
</template>
<script setup name="ClientTitleBar">
import { defineProps , computed } from 'vue';

const props = defineProps({
    title: {
        type: String,
        default:''
    }
})

// 是否是客户端app
const clinetAppComputed=computed(()=>{
  const state = window.myApi ? true : false;
  if (!state) {
    const appDom = document.querySelector('.app') || null;
    if(appDom) appDom.style.setProperty('--title-bar-height','0px')
  }
  return state;
})


</script>
<style scoped lang="less">
.title-bar {
    width: 100%;
    height: var(--title-bar-height);
    background-color: var(--system-primary-color);
    -webkit-app-region: drag;
    line-height: var(--title-bar-height);
    text-align: center;
    color: #ffffff;
    .title-content {
      -webkit-app-region: no-drag;
      cursor: default;
      -webkit-user-select: none; /* Safari */
      user-select: none;
      font-size: 13px;
      font-weight: bold;
    }
  }
</style>